<template>
  <div class="mbti-result-card">
    <template v-if="result">
      <div class="mbti-type-group">
        <span class="mbti-avatar-wrap">
          <image class="mbti-avatar-img"
            :src="resultBg"
            mode="aspectFit" :style="getAvatarStyle(result.type)" />
        </span>
        <span class="mbti-type">{{ result.type }}</span>
        <span class="mbti-group" v-if="result.group">（{{ result.group }}）</span>
      </div>
      <div class="mbti-desc">{{ result.description }}</div>
      <div class="mbti-section">
        <div class="mbti-section-title">性格特点</div>
        <div class="mbti-tags">
          <span class="mbti-tag" v-for="trait in result.traits" :key="trait">{{ trait }}</span>
        </div>
      </div>
      <div class="mbti-section">
        <div class="mbti-section-title">适合的职业</div>
        <div class="mbti-tags">
          <span class="mbti-tag job" v-for="job in result.jobs" :key="job">{{ job }}</span>
        </div>
      </div>
      <div class="mbti-btns">
        <button class="mbti-retry-btn" @click="$emit('retry')">再来一次</button>
      </div>
    </template>
    <template v-else>
      <div class="mbti-empty">请完成测试以查看您的结果。</div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MbtiResult',
  props: {
    result: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      resultBg: null
    }
  },
  mounted() {
    // 使用本地图片路径
    this.resultBg = '/static/mbti/mbti-sprite.png';
      
  },
  methods: {
    getAvatarStyle(type) {
      // 雪碧图顺序与图片一致：
      // 第一行：INTP, INTP, ENTJ, ENTP
      // 第二行：INFJ, INFP, ENFJ, ENFP
      // 第三行：ISTP, ISFP, ]ESTP, ESFP
      // 第四行：ISTJ, ISFJ, ESTJ, ESFJ
      // 注意：图片第一格和第二格都是INTP（专家型/科学家），需分别对应INTP和INTJ
      const typeMap = {
        INTJ: { x: -34, y: -1 }, // 专家型
        INTP: { x: -113, y: -1 }, // 科学家
        ENTJ: { x: -235, y: -1 },
        ENTP: { x: -335, y: -1 },
        INFJ: { x: -34, y: -113 },
        INFP: { x: -132, y: -113 },
        ENFJ: { x: -235, y: -113 },
        ENFP: { x: -335, y: -113 },
        ISTP: { x: -34, y: -223 },
        ISFP: { x: -132, y: -223 },
        ESTP: { x: -235, y: -223 },
        ESFP: { x: -335, y: -223 },
        ISTJ: { x: -34, y: -336 },
        ISFJ: { x: -132, y: -336 },
        ESTJ: { x: -235, y: -336 },
        ESFJ: { x: -335, y: -336 }
      };
      const pos = typeMap[type] || { x: 0, y: 0 };
      // 只用object-fit: cover，image标签用margin定位雪碧图
      const size = 120; // 头像容器尺寸
      const spriteSize = 440; // 雪碧图尺寸
      const cell = 135; // 单格尺寸

      return `width: ${spriteSize}px; height: ${spriteSize}px; margin-left: ${pos.x}px; margin-top: ${pos.y}px;`;
    }
  }
}
</script>

<style scoped>
.mbti-result-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(79, 140, 255, 0.08);
  padding: 40rpx 28rpx 32rpx 28rpx;
  max-width: 600rpx;
  margin: 0 auto;
  text-align: center;
  margin-top: 36rpx;
}

.mbti-btns {
  margin-top: 28rpx;
  display: flex;
  justify-content: center;
}

.mbti-retry-btn {
  padding: 18rpx 60rpx;
  font-size: 30rpx;
  border-radius: 14rpx;
  background: linear-gradient(90deg, #4f8cff, #6fd6ff);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.10);
  letter-spacing: 1rpx;
  transition: background 0.2s;
}

.mbti-retry-btn:active {
  background: #3b82f6;
}

.mbti-type-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.mbti-avatar-wrap {
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
  background: #f5f7fa;
  box-shadow: 0 2rpx 8rpx rgba(79, 140, 255, 0.10);
}

.mbti-avatar-img {
  width: 320px;
  height: 320px;
  display: block;
  object-fit: cover;
  position: relative;
}



.mbti-type {
  font-size: 48rpx;
  font-weight: 700;
  color: #4f8cff;
  letter-spacing: 2rpx;
}

.mbti-group {
  font-size: 28rpx;
  color: #6fd6ff;
  font-weight: 500;
}

.mbti-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 24rpx;
  margin-top: 8rpx;
  line-height: 1.6;
}

.mbti-section {
  margin-bottom: 18rpx;
}

.mbti-section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #4f8cff;
  margin-bottom: 10rpx;
}

.mbti-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  justify-content: center;
}

.mbti-tag {
  background: #e0e7ff;
  color: #2253a7;
  border-radius: 10rpx;
  padding: 8rpx 18rpx;
  font-size: 26rpx;
  font-weight: 500;
  margin-bottom: 4rpx;
}

.mbti-tag.job {
  background: #e6f7ff;
  color: #1a7bbd;
}

.mbti-empty {
  color: #aaa;
  font-size: 28rpx;
  padding: 40rpx 0;
}
</style>